<!--
  @Descripttion:：简历编辑，通过抽屉弹出简历预览（特殊）
  @Author：yejianbo
  @Date：2022年07月11日
-->
<template>
  <section class="resume-review" :hideHeadFooter="true">
    <!-- 个人基本信息 -->
    <section class="block">
      <div v-if="isCollection" class="headerRow">
        <div class="headerRow_collection" @click="saveCollectFun(collectStatus)">
          <img v-if="collectStatus!='0'" src="@/assets/images/collection_active.png">
          <img v-else src="@/assets/images/collection.png">
          {{ collectStatus!='0'?'收藏中':'收藏' }}
        </div>
        <el-button type="primary" @click="dialogFormVisible=true">填写备注</el-button>
      </div>
      <div class="head-icon">
        <img
          v-if="userInfo.studentPictureUrl"
          class="touxiang"
          :src="userInfo.studentPictureUrl"
          alt="用户头像"
        >
        <img
          v-else
          class="touxiang"
          src="@/assets/images/touxiang1.png"
          alt="用户头像"
        >
      </div>
      <div class="user-info">
        <div class="row1">
          {{ userInfo.nickname || userInfo.studentName }}
        </div>
        <div class="row2">
          {{ userInfo.sex }}<span class="line" />
          {{ userInfo.age || '--' }}
          <span class="line" />{{ userInfo.liveCity
          }}<span class="line" />{{ userInfo.clan }}
          <br>
        </div>
        <!-- <div v-if="!isCompany" class="row3s">
          <span class="label">手机号码</span>
          <span class="label">{{ userInfo.mobile }}</span>
        </div>
        <div v-if="!isCompany" class="row3s">
          <span class="label">邮箱地址</span>
          <span class="label">{{ userInfo.email }}</span>
        </div> -->
      </div>
    </section>
    <!-- 求职状态 -->
    <section class="block pt30">
      <p class="title">求职状态</p>
      <div class="job-wish-item">
        <div class="row1">
          {{ (userInfo.jobStatus || '--') + "/" + (userInfo.inJobTime || '--') }}
        </div>
      </div>
    </section>
    <!-- 切换简历模块 -->
    <div v-if="isDataList" class="changeRow">
      <div
        v-for="(item, index) in curriculumList"
        :key="index"
        class="items"
        :class="(currentIndex == index?'active':'')"
        @click="changeIndex(index)"
      >
        <span>{{ (item.name || `模板${index+1}`) }}</span>
      </div>
    </div>
    <!-- 简历组件 -->
    <div v-for="(item, index) in curriculumList" :key="index">
      <CurriculumItem v-if="(index == currentIndex)" :item="item" />
    </div>
    <el-dialog
      title="新增学生备注记录"
      :visible.sync="dialogFormVisible"
      width="500"
      append-to-body
    >
      <el-form :model="form">
        <el-form-item label="备注" required>
          <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入该学生简历备注"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 4, maxRows: 6 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sunbmit">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { getAge } from '@/utils/utils'
import CurriculumItem from './curriculumItem.vue'
import { deepClone } from '@/utils/index'
import {
  saveCollect,
  saveNotes
} from '@/api/school-admin-api/hireManage/index.js'
import {
  saveEnterpriseCollect,
  saveEnterpriseNotes
} from '@/api/company-admin-api/hireManage/index.js'

export default {
  // 组件名称
  name: 'Demo',
  // 局部注册的组件
  components: { CurriculumItem },
  // 组件参数 接收来自父组件的数据
  props: {
    hideEdit: {
      type: Boolean,
      default: () => false
    },
    isHavaUserInfo: {
      type: Boolean,
      default: () => false
    },
    isDataList: {
      type: Boolean,
      default: () => false
    },
    isCollection: {
      type: Boolean,
      default: () => false
    }
  },
  // 组件状态值
  data() {
    return {
      userInfo: {},
      currentIndex: 0,
      curriculumList: [],
      collectStatus: false,
      dialogFormVisible: false,
      isCompany: false,
      form: {
        remarks: ''
      }
    }
  },
  // 计算属性
  computed: {
  },
  // 组件方法
  methods: {
    sunbmit() {
      if (!this.form.remarks) {
        this.$message.error('请填写备注!')
        return
      }
      const params = {
        relationId: this.userInfo.id,
        relationType: this.userInfo.relationType,
        remarks: this.form.remarks
      }
      if (this.userInfo.relationType > 2) {
        saveEnterpriseNotes(params).then(res => {
          if (res.data) {
            this.form.remarks = ''
            this.$message.success('备注成功')
            this.dialogFormVisible = false
            this.$emit('saveCollectFun', this.collectStatus || '0')
          }
        })
      } else {
        saveNotes(params).then(res => {
          if (res.data) {
            this.form.remarks = ''
            this.$message.success('备注成功')
            this.dialogFormVisible = false
            this.$emit('saveCollectFun', this.collectStatus || '0')
          }
        })
      }
    },
    saveCollectFun(collectStatus) {
      const params = {
        collectStatus: collectStatus == '1' ? '0' : '1',
        relationId: this.userInfo.id,
        relationType: this.userInfo.relationType
      }
      /**
         * 关联类型:
         * 1:运营端(招聘管理-职位应聘),
         * 2:运营端(人才夹-学生列表),
         * 3:企业端(招聘管理-职位应聘),
         * 4:企业端(招聘管理-自主招聘),
         * 5:企业端(人才夹-学生列表)
         * */
      if (this.userInfo.relationType > 2) {
        saveEnterpriseCollect(params).then(res => {
          if (res.data) {
            this.collectStatus = collectStatus == '1' ? '0' : '1'
            this.$emit('saveCollectFun', this.collectStatus || '0')
          }
        })
      } else {
        saveCollect(params).then(res => {
          if (res.data) {
            this.collectStatus = collectStatus == '1' ? '0' : '1'
            this.$emit('saveCollectFun', this.collectStatus || '0')
          }
        })
      }
    },
    changeIndex(index) {
      if (index == this.currentIndex) return
      this.currentIndex = index
    },
    phoneDesensitization(mobile) {
      return mobile.replace(/(\d{3})\d*(\d{4})/, `$1${new Array(mobile.length - 6).join('*')}$2`)
    },
    /**
     *
     * @param {Array} data 简历模版数组
     * @param {Object} userInfo 用户信息 没有age年龄字段，要从简历模版中birthday生成
     */
    open(data, userInfo) {
      if (data) {
        if (this.isHavaUserInfo) {
          // data.mobile = data.phoneNumber
          userInfo = this.isHavaUserInfo ? data : userInfo
        }
        userInfo.mobile = userInfo.mobile || userInfo.phoneNumber
        this.isCompany = localStorage.getItem('loginType') === 'company'
        // if(localStorage.getItem('loginType') == 'company'){//企业端需要进行手机号脱敏处理
        //   userInfo.mobile = this.phoneDesensitization(userInfo.mobile)
        // }
        if (userInfo.birthday) { // userInfo中没有birthday、age字段，要从简历模版那边拿
          userInfo.age = getAge(userInfo.birthday) + '岁'
        }
        if (Array.isArray(data) && data.length > 0) {
          data.map(item => {
            if (item.birthday) {
              userInfo.age = getAge(item.birthday) + '岁'
            }
          })
        }
        this.userInfo = userInfo
        this.collectStatus = userInfo.collectStatus || false
        if (this.isDataList) {
          this.curriculumList = deepClone(data)
          return
        }
        this.curriculumList = deepClone([data])
      }
    }
  }
}
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  .resume-review {
    position: relative;
    width: 100%;
    background: #f5f8fa;
    .edit-btn {
      position: absolute;
      top: 30px;
      right: 30px;
    }
    .block {
      position: relative;
      background: #fff;
      margin-bottom: 20px;
      .headerRow{
        padding: 12px;
        height: 70px;
        display: flex;
        color: #9597A0;
        font-size: 20px;
        align-items: center;
        .headerRow_collection{
          height: 40px;
          align-items: center;
          display: flex;
          cursor: pointer;
          margin-right: 12px;
          img{
            width: 23px;
            height: 23px;
          }
        }
      }
    }
    .pt30 {
      padding: 30px 40px;
    }
    .head-icon {
      position: relative;
      background: url("../../assets/images/blue_bg.png") no-repeat center
        center / cover;
      width: 100%;
      height: 180px;
      > img {
        display: block;
        width: 64px;
        height: 64px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate3d(-50%, 50%, 0);
        overflow: hidden;
      }
    }
    .user-info {
      position: relative;
      padding: 73px 0 120px;
      text-align: center;
      .row1 {
        position: relative;
        line-height: 50px;
        font-weight: 600;
        color: #37383d;
        font-size: 36px;
        text-align: center;
        margin-bottom: 12px;
        span {
          display: inline-block;
          border-radius: 6px;
          border: 1px solid #2f8efe;
          font-size: 20px;
          font-weight: 400;
          color: #2f8efe;
          line-height: 36px;
          padding: 0 12px;
          margin-left: 12px;
          vertical-align: middle;
          // &.line{
          //   position: relative;
          //   display: inline-block;
          //   width: 1px;
          //   height: 14px;
          //   background: #9597a0;
          //   margin: 0 18px;
          // }
        }
      }
      .row2 {
        position: relative;
        display: inline-block;
        text-align: center;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 18px;
        }
      }
      .row3s {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        bottom: 60px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        height: 30px;
        .label {
          margin-left: 6px;
        }
        &:last-child{
          bottom: 20px;
        }
        // .label:first-child {
        //   width: 40%;
        // }
      }
    }
    .title {
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 40px;
      margin: 0 0 30px;
      padding: 0;
    }
    .job-wish-item {
      .row1 {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 33px;
        margin-bottom: 20px;
        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 17px;
          background: #9597a0;
          margin: 0 25px;
        }
      }
      .job-type {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 28px;
      }
    }
    .word-record-item {
      padding-bottom: 27px;
      border-bottom: 1px solid #d4d6da;
      margin-bottom: 30px;
      &:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #fff;
      }
      .row1 {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-bottom: 15px;
      }
      .row2 {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 33px;
        margin-bottom: 15px;
        span {
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #9597a0;
          line-height: 33px;
          margin-left: 218px;
        }
      }
      .row3 {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-bottom: 15px;
        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 17px;
          background: #9597a0;
          margin: 0 25px;
        }
      }
      .row4 {
        margin-bottom: 20px;
        .label {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 28px;
          margin-right: 17px;
        }
        .value {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #030303;
          line-height: 28px;
          margin-right: 130px;
        }
      }
      .row5 {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3c3c3c;
        line-height: 37px;
      }
    }
  }

  .changeRow{
    width: 100%;
    background: #F5F8FA;
    padding: 0 14px 0;
    display: flex;
    .items{
      width: 180px;
      height: 58px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      font-size: 18px;
      margin-right: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597A0;
      border-radius: 6px 6px 0px 0px;
      cursor: pointer;
      transition-duration: .3s;
      position: relative;
      span{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-icon-edit{
        color: #3D6CB0;
        position: absolute;
        right: 10px;
        cursor: pointer;
        display: none;
        top: 50%;
        transform: translateY(-50%);
      }
      &:hover{
        background: #fff;
      }
      &.active{
        background: #fff;
        color: #3D6CB0;
        .el-icon-edit{
          display: inline;
        }
      }
      &.adds{
        background: transparent !important;
      }
    }
  }
  </style>

